<template>
  <div id="app">
  <el-menu style="width:100%" :default-active="activeIndex2" class="el-menu-demo" mode="horizontal"
      @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
        <el-submenu index="1">
              <template slot="title">
                  <i class="navi_icon navi_icon_start"></i>
                  开始
              </template>
              <el-menu-item index="1-1" ><router-link to="/hello" class="kk">组件之间传值</router-link></el-menu-item>
              <el-menu-item index="1-2" ><router-link to="/" class="kk">热力图</router-link></el-menu-item>
              <el-menu-item index="1-3" ><router-link to="/aggregate" class="kk">聚合图</router-link></el-menu-item>
              <el-menu-item index="1-3" ><router-link to="/muchpoint" class="kk">海量点叠加，创建hover功能</router-link></el-menu-item>
              <el-menu-item index="1-3" ><router-link to="/flowgraph" class="kk">流向图</router-link></el-menu-item>
              <el-menu-item index="1-3" ><router-link to="/pathreplay" class="kk">路径回放</router-link></el-menu-item>
              <el-menu-item index="1-3" ><router-link to="/pathplan" class="kk">路径规划</router-link></el-menu-item>
              <el-menu-item index="1-3" ><router-link to="/histogram" class="kk">柱状图</router-link></el-menu-item>
              <el-menu-item index="1-3" ><router-link to="/pie" class="kk">饼状图</router-link></el-menu-item>
        </el-submenu>
      <el-submenu index="2">
          <template slot="title">我的工作台</template>
          <el-submenu index="2-1">
              <template slot="title">添加图标与图片</template>
              <el-menu-item index="2-1" ><router-link to="/picture" class="kk">添加图片</router-link></el-menu-item>
              <el-menu-item index="2-2"><router-link to="/icon" class="kk">添加图标</router-link></el-menu-item>
              <el-menu-item index="2-3"><router-link to="/animaticon" class="kk">添加动态图标</router-link></el-menu-item>
          </el-submenu>
          <el-submenu index="2-2">
              <template slot="title">图层</template>
              <el-menu-item index="2-2-1"><router-link to="/opacity" class="kk">设置透明度</router-link></el-menu-item>
              <el-menu-item index="2-2-2"><router-link to="/layerchage" class="kk">改变图层颜色</router-link></el-menu-item>
              <el-menu-item index="2-2-3"><router-link to="/layerswitch" class="kk">图层切换</router-link></el-menu-item>
          </el-submenu>
           <el-menu-item index="2-3" ><router-link to="/animatpoint" class="kk">动态点</router-link></el-menu-item>
           <el-menu-item index="2-3" ><router-link to="/flowline" class="kk">动态线</router-link></el-menu-item>
             <el-submenu index="2-4">
              <template slot="title">矢量数据</template>
              <el-menu-item index="2-4-1"><router-link to="/geoline" class="kk">GeoJson line</router-link></el-menu-item>
              <el-menu-item index="2-4-2">GeoJson point</el-menu-item>
              <el-menu-item index="2-4-3">GeoJson polygon</el-menu-item>
          </el-submenu>
           <el-menu-item index="2-6" ><router-link to="/hover" class="kk">create hover effect</router-link></el-menu-item>
           <el-menu-item index="2-5" ><router-link to="/poinmove" class="kk">图标沿路劲移动</router-link></el-menu-item>
           <el-menu-item index="2-6" ><router-link to="/3dmap" class="kk">3DMap</router-link></el-menu-item>
           <el-menu-item index="2-6" ><router-link to="/drag" class="kk">图标和点拖拽</router-link></el-menu-item>
            <el-menu-item index="2-6" ><router-link to="/gradienline" class="kk">创建渐变线</router-link></el-menu-item>
      </el-submenu>
      <el-submenu index="3">
              <template slot="title">功能列表</template>
              <el-menu-item index="3-1"><router-link to="/3dpolygon" class="kk">3Dpolygon</router-link></el-menu-item>
              <el-menu-item index="3-2"><router-link to="/3dline" class="kk">animationline</router-link></el-menu-item>
              <el-menu-item index="3-3"><router-link to="/mapboxdrag" class="kk">拖拽点</router-link></el-menu-item>
               <el-menu-item index="3-3"><router-link to="/mapboxgraline" class="kk">创建渐变线</router-link></el-menu-item>
      </el-submenu>
              <el-menu-item index="4" class="kk"><a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/" target="_blank" class="kk">MapboxAPI</a></el-menu-item>
              <el-menu-item index="4" class="kk"><a href="http://www.smartmapx.com/develop.html" target="_blank" class="kk">smartmapx</a></el-menu-item>
              <el-menu-item index="5" class="kk"><a href="https://element.eleme.cn/#/zh-CN/component/menu" target="_blank" class="kk">element</a></el-menu-item>
      </el-menu>
    <el-container>
      <el-main style="padding:0px">
         <div style="width: 100%;height: 100%;">
            <router-view></router-view>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue';
import home from '@/views/Home.vue'
export default {
  name:'App',
  data (){
    return {
       activeIndex: '1',
       activeIndex2: '1'
    }
  },
  components:{
    HelloWorld,
    home
  },
  methods:{
       handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
  }
}
</script>
<style lang="scss">
@import url("../node_modules/@smx/api/smartmapx.css");
//或者使用@import url("~@smx/api/smartmapx.css")
    body{
      margin:0;
      padding:0;
      height:100%;
    }

    #app{
      position:absolute;
      display:flex;
      flex:1;
      flex-direction:column;
      height:100%;
      width:100%;

      .jiji{
        background-color:green;
        width:800px;
      }

      .yuyu{
        margin-left:885px;
        width:400px;
        position:absolute;
        display:flex;
        margin-top:300px;
        flex-direction:column;
      }
    }

    .kk{
      text-decoration: none;
      color:white
    }
   
</style>
